module(..., package.seeall)

--====================================================================--
-- POP UP: INVENTORY->GALLERY POPUP
--====================================================================--

--[[

******************
 - INFORMATION
******************

--]]

local imgPath = "images/"

local widget = require "widget"

local myImages = {
	"jessica_100.jpg",
	"andy_100.jpg",
	"aya_100.jpg",
	"jessica_100.jpg",
	"jessica_100.jpg",
	"jessica_100.jpg",
	"jessica_100.jpg"
}	
local itemWidth  = 50
local itemHeight = 50

local t = {}
t[1] = {}
t[1].x = 40
t[1].y = 10
t[1].name = "Object1"
t[1].color = "BLUE"

t[2] = {}
t[2].x = 50
t[2].y = 10
t[2].name = "Object2"
t[2].color = "BLUE"

t[3] = {}
t[3].x = 50
t[3].y = 10
t[3].name = "Object2"
t[3].color = "BLUE"

t[4] = {}
t[4].x = 50
t[4].y = 10
t[4].name = "Object2"
t[4].color = "BLUE"

t[5] = {}
t[5].x = 50
t[5].y = 10
t[5].name = "Object2"
t[5].color = "BLUE"

local Object = {}

new = function ()
	
	------------------
	-- Groups
	------------------
	
	local localGroup = display.newGroup()
	
	------------------
	-- Display Objects
	------------------
	---------------------------tableview icons
	gridGroup = display.newGroup()
	local function makeTiles(rowcnt,colcnt,unit_w,unit_h,cellpadding,leftmargin,topmargin)
		--gridbg
		local 	gridbg = display.newRect( 0, 0, rowcnt*(unit_w+cellpadding)+leftmargin, colcnt*(unit_h+cellpadding)+topmargin )
				gridbg:setFillColor(140, 140, 140)
				gridbg:setStrokeColor(180, 180, 180)
				gridGroup:insert(gridbg)
		
		for i = 1, rowcnt, 1 do
			for j = 1, colcnt, 1 do
				x = (j-1)*(unit_w + cellpadding)+leftmargin
				y = topmargin + (i-1)*(unit_h + cellpadding)
				local unit = display.newRect( x, y, unit_w, unit_h )
				gridGroup:insert(unit)

			end
		end
	end
	itemWidth = 50
	itemHeight = 50
	unit_w = 50
	unit_h = 50
	function putGrid(row,column,img,grid,cellpadding,leftmargin,topmargin)
		local  item = display.newImageRect( img, itemWidth, itemHeight )
		item.x = (column-1)*(unit_w + cellpadding) + leftmargin+25
		item.y = topmargin + (row-1)*(unit_h + cellpadding) + 25
		item:addEventListener("touch", popMonster)
		grid:insert(item)
	end


	function printMyName()
		print("this is my name")
		monG:removeSelf()
	end

	function popMonster()
		local monG = display.newGroup();
	 	monster = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
		monster:setFillColor(140, 140, 140)
		monster:setStrokeColor(255, 0, 0)
		monG:insert(monster)
		--close button
		local btBatsutIt = function ( event )
			if event.phase == "release" then
				--director:closePopUp()
				--monG:remove(btBatsuI)
				--monG:remove(monster)
				--monG:removeSelf()
				monG.x = -400
				
				
			end
		end

		local btBatsuI = ui.newButton{
						default = imgPath .. "cross_yellow_64.png",
						over = imgPath .. "cross_green_64.png",
						onEvent = btBatsutIt,
						id = "btBatsuI"
		}
		btBatsuI.x = 200
		btBatsuI.y = 20
		monG:insert(btBatsuI)
		localGroup:insert(monG)
	end


	-- for i = 1,3 do
		-- icon[i] = display.newImageRect( myImages[i], 100, 100 )
		-- icon.x = i * 10;
		-- icon.y = 40;
	-- end
	numOfRows, numOfColumns  = 2, 3
	i = 1
	local function makeGrid() 
		for row = 1 , numOfRows do
			for column = 1, numOfColumns,1 do
				if column > numOfColumns then
					break
				else
					if i == #myImages then
						break
					end
					--Object[i] = display.newRect(0, 0, 80, 80)
					Object[i] = display.newImageRect( myImages[i], itemWidth, itemHeight )
					Object[i].x = (column-1) * (itemWidth + 20) + 50
					Object[i].y = (row-1) * (itemHeight + 50) + 120
					-- if (i==1) then
						-- Object[i].x = t[i].x;
					-- else
						-- Object[i].x = Object[i-1].x + 60;
					-- end
					
					-- if (row == 1) then
						-- Object[i].y = 150
					-- else
						-- Object[i].y = 90 + (row*60)
					-- end
					
					Object[i].name = t[i].name
					Object[i].color = t[i].color
					Object[i].ID = i
					Object[i].anotherName = "Object"..i..""
					--Object[i]:addEventListener("touch", printMyName)
					localGroup:insert(Object[i])
					print(i , Object[i].x , Object[i].y)
					i = i + 1
				end
			end
		end
	end
	
	local function spawnObjects()
		--for i = 1, (numOfColumns*numOfRows) do  --commented out because my table only has index [1]
		for i = 1, #t do
			--Object[i] = display.newRect(0, 0, 80, 80)
			Object[i] = display.newImageRect( myImages[i], 50, 50 )
			if (i==1) then
				Object[i].x = t[i].x;
			else
				Object[i].x = Object[i-1].x + 60;
			end
			Object[i].y = 150
			Object[i].name = t[i].name
					Object[i].color = t[i].color
			Object[i].ID = i
			Object[i].anotherName = "Object"..i..""
			--Object[i]:addEventListener("touch", printMyName)
			localGroup:insert(Object[i])
			print(i , Object[i].x)
		end
	end
	-----------------------------table view icons grid...
	
	local w, h = display.contentWidth, display.contentHeight
	local background = display.newImage( "background3.png" )
	background.xScale = 0.94
	background.yScale = 0.8
	background.alpha = 0.95
	
	--close button
	local btBatsut = function ( event )
		if event.phase == "release" then
			director:closePopUp()
		end
	end

	local btBatsu = ui.newButton{
					default = imgPath .. "cross_yellow_64.png",
					over = imgPath .. "cross_green_64.png",
					onEvent = btBatsut,
					id = "btBatsu"
	}
	btBatsu.x, btBatsu.y = 295,20

	--eo close button
	
	--popup header
	local headerBdr = display.newRect( 10, 0, display.contentWidth-20, 30 )
	headerBdr.strokeWidth = 1
	headerBdr:setFillColor(90, 90, 90)
	headerBdr:setStrokeColor(70, 70, 70)
	
	--popup title
	local popupTitle = display.newText( "Gallery", 120, 5, native.systemFontBold, 20 )

	--mission contents
	local txtMissionHead = display.newText( "                   Level 5\n           Novice Summoner", 120, 0, native.systemFontBold, 16 )
	txtMissionHead:setReferencePoint(display.CenterLeftReferencePoint);
	txtMissionHead.x, txtMissionHead.y = 20, 60
	txtMissionHead:setTextColor( 255,255,240 )
	local txtMissionContent = display.newText( "EXP \n156/320 \n\nSummoned Monster\n4/5", 120, 80, native.systemFontBold, 14 )
	txtMissionContent:setReferencePoint(display.CenterLeftReferencePoint);
	txtMissionContent.x, txtMissionContent.y = 20, 130
	
	--popup window group
	local headerGroup = display.newGroup();
	headerGroup.x = 0;
	headerGroup.y = 50;
	headerGroup:insert(headerBdr)
	headerGroup:insert(popupTitle)
	headerGroup:insert(txtMissionHead)
	headerGroup:insert(txtMissionContent)
	headerGroup:insert(btBatsu)
	headerGroup.xScale = 1;
	headerGroup.yScale = 1;			
	--eo popup window group

	------------------
	-- Listeners
	------------------
	
	local touched = function ( event )
		if event.phase == "ended" then
			director:closePopUp()
		end
	end
	
	local closed = function ( event )
		if event.phase == "ended" then
			director:closePopUp()
		end
	end
	

	
	--====================================================================--
	-- INITIALIZE
	--====================================================================--
	
	local function initVars ()
		
		------------------
		-- Inserts
		------------------
		
		localGroup:insert( background )
		localGroup:insert( headerGroup )
		--localGroup:insert( btBatsu )
		
		
		------------------
		-- Positions
		------------------
		
		--
		
		------------------
		-- Colors
		------------------
		
		--title:setTextColor( 255,255,255 )
		
		------------------
		-- Listeners
		------------------
		
		--background:addEventListener( "touch" , touched )
		
	end
	
	------------------
	-- Initiate variables
	------------------
	
	initVars()
	--spawnObjects()
	--makeGrid()
	makeTiles(5,5,50,50,10,10,5)
	for i=1,#myImages,1 do
		maxrow=5
		maxcol=5
		r = math.ceil(i/maxrow) --what row?
		c = i - (r-1)*maxcol    --what column?
		putGrid(r,c,myImages[i],gridGroup,10,10,5)
		print("row=",r ,"col=", c)
	end
	gridGroup.x = 5
	gridGroup.y = 81
	localGroup:insert(gridGroup)
	
	------------------
	-- MUST return a display.newGroup()
	------------------
	
	return localGroup
	
end
